<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>填写核对订单信息</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/fillin.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/cart2.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/qs.min.js"></script>
	<script type="text/javascript" src="js/request.js"></script>

</head>
<body>

<div id="app">
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>
	
	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="京西商城"></a></h2>
			<div class="flow fr flow2">
				<ul>
					<li>1.我的购物车</li>
					<li class="cur">2.填写核对订单信息</li>
					<li>3.成功提交订单</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<div style="clear:both;"></div>

	<!-- 主体部分 start -->
	<div class="fillin w990 bc mt15">
		<div class="fillin_hd">
			<h2>填写并核对订单信息</h2>
		</div>

		<div class="fillin_bd">
			<!-- 收货人信息  start-->
			<div class="address">
				<h3>收货人信息 <a href="javascript:;" id="address_modify">[{{currentReceiveAddress ? '修改':'录入'}}]</a></h3>
				<div class="address_info" v-if="currentReceiveAddress">
					<p>{{currentReceiveAddress.name}}  {{currentReceiveAddress.phone}} </p>
					<p>{{currentReceiveAddress.province}} {{currentReceiveAddress.city}} {{currentReceiveAddress.region}} {{currentReceiveAddress.detailAddress}} {{currentReceiveAddress.phone}} </p>
				</div>

				<div class="address_select none">
					<ul>
						<li :class="receiveAddress.id === currentReceiveAddress.id ? 'cur':''" v-for="receiveAddress in receiveAddressList">
							<input type="radio" name="address" :checked="receiveAddress.id === currentReceiveAddress.id?'checked':''" @click="currentReceiveAddress = receiveAddress" />{{receiveAddress.name}} {{receiveAddress.province}} {{receiveAddress.city}} {{receiveAddress.region}} {{receiveAddress.detailAddress}} {{receiveAddress.phone}}
							<a style="cursor: pointer;" @click="updateDefaultReceiveAddress(receiveAddress.id)">设为默认地址</a>
							<a style="cursor: pointer;">编辑</a>
							<a style="cursor: pointer;" @click="deleteReceiveAddress(receiveAddress.id)">删除</a>
							<span style="color: red;">{{receiveAddress.defaultState?"[默认]":""}}</span>
						</li>
						<li><input type="radio" name="address" class="new_address"  />使用新地址</li>
					</ul>
					<form action="" class="none" name="address_form">
						<ul>
							<li>
								<label for=""><span>*</span>收 货 人：</label>
								<input type="text" name="" class="txt" v-model="receiveAddress.name"/>
							</li>
							<li>
								<label for=""><span>*</span>所在地区：</label>
								<select name="" id="" v-model="receiveAddress.province">
									<option value="">请选择</option>
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="天津">天津</option>
									<option value="重庆">重庆</option>
									<option value="武汉">武汉</option>
								</select>

								<select name="" id="" v-model="receiveAddress.city">
									<option value="">请选择</option>
									<option value="朝阳区">朝阳区</option>
									<option value="东城区">东城区</option>
									<option value="西城区">西城区</option>
									<option value="海淀区">海淀区</option>
									<option value="昌平区">昌平区</option>
								</select>

								<select name="" id="" v-model="receiveAddress.region">
									<option value="">请选择</option>
									<option value="西二旗">西二旗</option>
									<option value="西三旗">西三旗</option>
									<option value="三环以内">三环以内</option>
								</select>
							</li>
							<li>
								<label for=""><span>*</span>详细地址：</label>
								<input type="text" name="" class="txt address" v-model="receiveAddress.detailAddress" />
							</li>
							<li>
								<label for=""><span>*</span>手机号码：</label>
								<input type="text" name="" class="txt" v-model="receiveAddress.phone" />
							</li>
						</ul>
					</form>
					<a style="cursor: pointer;" class="confirm_btn" @click="saveReceiveAddress()"><span>保存收货人信息</span></a>
				</div>
			</div>
			<!-- 收货人信息  end-->

			<!-- 配送方式 start -->
			<div class="delivery">
				<h3>送货方式 <a href="javascript:;" id="delivery_modify">[修改]</a></h3>
				<div class="delivery_info">
					<p>普通快递送货上门</p>
					<p>送货时间不限</p>
				</div>

				<div class="delivery_select none">
					<table>
						<thead>
							<tr>
								<th class="col1">送货方式</th>
								<th class="col2">运费</th>
								<th class="col3">运费标准</th>
							</tr>
						</thead>
						<tbody>
							<tr :class="deliveryType === 1 ? 'cur' : ''">
								<td>
									<input type="radio" name="delivery" :checked="deliveryType === 1 ? 'checked' : ''" @click="$('.delivery_info p').eq(0).text('普通快递送货上门'); deliveryType = 1; fare=10"/>普通快递送货上门
								</td>
								<td>￥10.00</td>
								<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
							</tr>
							<tr :class="deliveryType === 2 ? 'cur' : ''">
								
								<td><input type="radio" name="delivery" :checked="deliveryType === 2 ? 'checked' : ''" @click="$('.delivery_info p').eq(0).text('特快专递'); deliveryType = 2; fare=20"/>特快专递</td>
								<td>￥20.00</td>
								<td>每张订单不满499.00元,运费25.00元, 订单4...</td>
							</tr>
							<tr :class="deliveryType === 3 ? 'cur' : ''">
								
								<td><input type="radio" name="delivery" :checked="deliveryType === 3 ? 'checked' : ''" @click="$('.delivery_info p').eq(0).text('加急快递送货上门'); deliveryType = 3; fare=30"/>加急快递送货上门</td>
								<td>￥30.00</td>
								<td>每张订单不满499.00元,运费35.00元, 订单4...</td>
							</tr>
							<tr :class="deliveryType === 4 ? 'cur' : ''">

								<td><input type="radio" name="delivery" :checked="deliveryType === 4 ? 'checked' : ''" @click="$('.delivery_info p').eq(0).text('平邮'); deliveryType = 4; fare=10"/>平邮</td>
								<td>￥10.00</td>
								<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
							</tr>
						</tbody>
					</table>
					<a style="cursor: pointer;" class="confirm_btn" @click="$('.delivery_select').hide(); $('.delivery_info').show(); $('#delivery_modify').show()"><span>确认送货方式</span></a>
				</div>
			</div> 
			<!-- 配送方式 end --> 

			<!-- 支付方式  start-->
			<div class="pay">
				<h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
				<div class="pay_info">
					<p>在线支付</p>
				</div>

				<div class="pay_select none">
					<table> 
						<tr :class="paymentType === 1 ? 'cur' : ''">
							<td class="col1"><input type="radio" name="pay" :checked="paymentType === 1 ? 'checked' : ''" @click="$('.pay_info p').eq(0).text('货到付款'); paymentType=1"/>货到付款</td>
							<td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
						</tr>
						<tr :class="paymentType === 2 ? 'cur' : ''">
							<td class="col1"><input type="radio" name="pay" :checked="paymentType === 2 ? 'checked' : ''" @click="$('.pay_info p').eq(0).text('在线支付'); paymentType=2"/>在线支付</td>
							<td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
						</tr>
						<tr :class="paymentType === 3 ? 'cur' : ''">
							<td class="col1"><input type="radio" name="pay" :checked="paymentType === 3 ? 'checked' : ''" @click="$('.pay_info p').eq(0).text('上门自提'); paymentType=3"/>上门自提</td>
							<td class="col2">自提时付款，支持现金、POS刷卡、支票支付</td>
						</tr>
						<tr :class="paymentType === 4 ? 'cur' : ''">
							<td class="col1"><input type="radio" name="pay" :checked="paymentType === 4 ? 'checked' : ''" @click="$('.pay_info p').eq(0).text('邮局汇款'); paymentType=4"/>邮局汇款</td>
							<td class="col2">通过快钱平台收款 汇款后1-3个工作日到账</td>
						</tr>
					</table>
					<a style="cursor: pointer;" class="confirm_btn" @click="$('.pay_select').hide(); $('.pay_info').show(); $('#pay_modify').show()"><span>确认支付方式</span></a>
				</div>
			</div>
			<!-- 支付方式  end-->

			<!-- 发票信息 start-->
			<div class="receipt">
				<h3>发票信息 <a href="javascript:;" id="receipt_modify">[修改]</a></h3>
				<div class="receipt_info">
					<p>个人发票</p>
					<p>内容：明细</p>
				</div>

				<div class="receipt_select none">
					<form action="">
						<ul>
							<li>
								<label for="">发票抬头：</label>
								<input type="radio" name="type" checked="checked" class="personal" />个人
								<input type="radio" name="type" class="company"/>单位
								<input type="text" class="txt company_input" disabled="disabled" />
							</li>
							<li>
								<label for="">发票内容：</label>
								<input type="radio" name="content" checked="checked" />明细
								<input type="radio" name="content" />办公用品
								<input type="radio" name="content" />体育休闲
								<input type="radio" name="content" />耗材
							</li>
						</ul>						
					</form>
					<a href="" class="confirm_btn"><span>确认发票信息</span></a>
				</div>
			</div>
			<!-- 发票信息 end-->

			<!-- 商品清单 start -->
			<div class="goods" v-if="cart">
				<h3>商品清单</h3>
				<table>
					<thead>
					<tr>
						<th class="col1">商品</th>
						<th class="col2">规格</th>
						<th class="col3">价格</th>
						<th class="col4">数量</th>
						<th class="col5">小计</th>
					</tr>
					</thead>
					<tbody>
					<tr v-for="item in cart.items">
						<td class="col1"><a :href="'goods.html?skuId=' + item.skuId"><img :src="item.image" alt="" /></a>  <strong><a :href="'goods.html?skuId=' + item.skuId">{{item.title}}</a></strong></td>
						<td class="col2"> <p v-for="attr in item.saleAttrs.split(',')">{{attr}}</p> </td>
						<td class="col3">{{item.price}}</td>
						<td class="col4"> {{item.count}}</td>
						<td class="col5"><span>￥{{item.subtotal}}</span></td>
					</tr>
					</tbody>
					<tfoot>
					<tr>
						<td colspan="5">
							<ul>
								<li>
									<span>{{cart.totalCount}} 件商品，总商品金额：</span>
									<em>￥{{cart.totalAmount}}</em>
								</li>
								<li>
									<span>返现：</span>
									<em>-￥0</em>
								</li>
								<li>
									<span>运费：</span>
									<em>￥{{fare}}</em>
								</li>
								<li>
									<span>应付总额：</span>
									<em>￥{{cart.totalAmount + fare}}</em>
								</li>
							</ul>
						</td>
					</tr>
					</tfoot>
				</table>
			</div>
			<!-- 商品清单 end -->
		
		</div>

		<div class="fillin_ft" v-if="cart">
			<a style="cursor: pointer;" @click="submitOrder()"><span>提交订单</span></a>
			<p>应付总额：<strong>￥{{cart.totalAmount + fare}}元</strong></p>
			
		</div>
	</div>
	<!-- 主体部分 end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>

<script type="text/javascript">
	const PRODUCT_PRICE_CHANGE = 7001;
	let vm = new Vue({
		el: "#app",
		data: function() {
			return {
				receiveAddressList: null,
				currentReceiveAddress: null,
				receiveAddress: {
					name: "",
					phone: "",
					province: "",
					city: "",
					region: "",
					detailAddress: ""
				},
				deliveryType: 1,
				fare: 10,
				paymentType: 2,
				cart: null
			}
		},
		methods: {
			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let r = location.search.substr(1).match(reg);
				if (r != null) return decodeURIComponent(r[2]); return null;
			},
			getDefaultReceiveAddress(list) {
				for (let i = 0; i < list.length; i++) {
					if (list[i].defaultState) {
						return list[i];
					}
				}
				return null;
			},
			updateDefaultReceiveAddress(id) {
				request("http://api.shopping.com/user/receiveAddress/defaultReceiveAddress?receiveAddressId=" + id, "put").then(data => {
					this.receiveAddressList = data;
				})
			},
			deleteReceiveAddress(id) {
				request("http://api.shopping.com/user/receiveAddress/receiveAddress?receiveAddressId=" + id, "delete").then(data => {
					this.receiveAddressList = data;
					if (id === this.currentReceiveAddress.id) {
						this.currentReceiveAddress = this.getDefaultReceiveAddress(data);
					}
				})
			},
			receiveAddressCheck() {
				let address = this.receiveAddress;
				return address.name && address.phone && address.province &&
						address.city && address.region && address.detailAddress;
			},
			saveReceiveAddress() {
				let $new_address = $(".address_select ul:first li:last");
				let new_address_class = $new_address.attr('class');
				if(new_address_class && new_address_class.indexOf('cur') !== -1) {
					if (!this.receiveAddressCheck()) {
						alert("请填写完整收货地址");
						return;
					}
					request("http://api.shopping.com/user/receiveAddress/receiveAddress", "post", this.receiveAddress).then(data => {
						this.receiveAddressList = data;
						this.currentReceiveAddress = this.getDefaultReceiveAddress(data);
						// 新增dom节点,需要重新绑定事件,否则新增的dom节点没有事件
						// 这就是混用jquery(真实dom操作)和vue(虚拟dom操作)的坏处
						Vue.nextTick(() => {
							jsCart2();
						})
					});
					$("form[name=address_form]").hide();
					$new_address.removeClass("cur");
				}
				$(".address_select").hide();
				$("#address_modify").show();
				$(".address_info").show();
			},
			submitOrder() {
				request("http://api.shopping.com/order/order/submit", "post", {
					receiveAddressId: this.currentReceiveAddress.id,
					deliveryType: this.deliveryType,
					paymentType: this.paymentType,
					token: this.getQueryString("token")
				}).then(data => {
					location.href = "pay.html?sn=" + data;
				}).catch(codeMsg => {
					if (codeMsg.code === PRODUCT_PRICE_CHANGE) {
						location.href = "cart.html";
					}
				})
			},
			getReceiveAddressList() {
				return request("http://api.shopping.com/user/receiveAddress/receiveAddressList", "get");
			},
			getCart() {
				return request("http://api.shopping.com/cart/cart", "get");
			}
		},
		created() {
			axios.all([this.getReceiveAddressList(), this.getCart()]).then(axios.spread((receiveAddressList, cart) => {
				this.receiveAddressList = receiveAddressList;
				this.currentReceiveAddress = this.getDefaultReceiveAddress(receiveAddressList);
				this.cart = cart;
			})).then(() => {
				Vue.nextTick(() => {
					jsCart2();
				})
			})
		}
	})
</script>

</body>
</html>
